<include file="../header" />
<div id="left-sider"><include file="../left-sider" /></div>
<style type="text/css">
.photo {margin: 8px;float:left;position:relative;}
.photoToDel {position:absolute; top: 5px; left: 5px; opacity: .3;font-size: 3em;}
.photo:hover .photoToDel {opacity: 1;}
.photo:hover {box-shadow: 5px 5px 5px #888;}
</style>
<div id="main">
  <div class="main-hd">
    <h2>{$gallery.name}</h2>
  </div>
  <div class="main-bd">
  	<form action='{:U("Gallery/del?id=$id")}' method="post" target="_self" id="photoToDelForm">
  	<div>
    	<input type="checkbox" id="photoToDelCtrl"/>
    	<input type="submit" value="删除" />
    	<a href='{:U("Gallery/upload?id=$id")}' target="_self">上传相片</a>
    </div>
    <volist name="photos" id="photo">
    	<div class="photo">
        	<input type="checkbox" class="photoToDel" name="photoToDel[]" value="{$photo.id}"/>
        	<a href="/Uploads/galleries/{$photo.filename}" target="_blank">
            	<img src="/Uploads/galleries/thumb_{$photo.filename}" />
            </a>
        </div>
    </volist>
    </form>
  </div>
</div>
<include file="../footer" /> 
<script type="text/javascript">
var photoToDel = document.querySelectorAll('.photoToDel');
document.getElementById('photoToDelCtrl').addEventListener('click',function(){
		if(this.checked) {
			for(var i=0; i<photoToDel.length; i++) {
				photoToDel[i].checked = true;
			}
		} else {
			for(var i=0; i<photoToDel.length; i++) {
				photoToDel[i].checked = false;
			}
		}
}, false);

document.getElementById('photoToDelForm').addEventListener('submit',function(e){
		if(!confirm('删除后无法恢复，你是否要继续？')) {
				e.preventDefault();
				return false;
		}
}, false);
</script>